<template>
  <div class="table-page">
    <GiTable
      row-key="id"
      id="officialKeywords"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
    >
      <template #custom-extra>
        <a-space>
          <a-button type="primary" size="small" @click="onAddOrEdit(false)">
            <template #icon><icon-plus /> </template>
            <span>新增</span>
          </a-button>
        </a-space>
      </template>

      <template #status="{ record }">
        <a-switch
          :checked-value="true"
          checked-text="是"
          :unchecked-value="false"
          unchecked-text="否"
          v-model="record.status"
          :before-change="handleChangeStatus.bind(null, record, 'status')"
        >
        </a-switch>
      </template>
      <template #reply="{ record }">
        <div v-if="record.type == 0">{{ record.reply }}</div>
        <div v-if="record.type == 1"><ImgHoverPreview :width="50" :url="record.reply" /></div>
      </template>
      <template #action="{ record }">
        <a-button type="text" size="small" @click="onAddOrEdit(record)"> 编辑 </a-button>
        <a-button type="text" size="small" @click="onDelete(record)"> 删除 </a-button>
      </template>
    </GiTable>

    <EditDrawer ref="EditDrawerRef" @getTableData="getTableData"></EditDrawer>
  </div>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { usePagination } from '@/hooks'
import { keywordList, keywordUpdate, keywordDel } from '@/apis'
import EditDrawer from './edit.vue'
// import MsCopyDiv from '@/components/MsCopyDiv/index.vue'
// import { reAssign } from '@/utils/common'
import ImgHoverPreview from '@/components/ImgHoverPreview/index.vue'

const columns = ref([
  {
    title: '排序',
    width: 90,
    align: 'center',
    dataIndex: 'sort',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '关键词',
    width: 180,
    align: 'center',
    render: (data) => {
      const text = data.record.keyword
      return text || '--'
    }
  },
  {
    title: '回复',
    width: 180,
    align: 'center',
    slotName: 'reply'
  },
  {
    title: '类型',
    width: 180,
    align: 'center',
    render: (data) => {
      const text = data.record.type
      return ['文字', '图片'][text] || '--'
    },
    filterable: {
      filters: [
        {
          text: '文字',
          value: 0
        },
        {
          text: '图片',
          value: 1
        }
      ],
      filter: (value, record) => record.type == value,
      multiple: true
    }
  },
  {
    title: '是否启用',
    width: 90,
    align: 'center',
    slotName: 'status',
    filterable: {
      filters: [
        {
          text: '启用',
          value: 1
        },
        {
          text: '不启用',
          value: 0
        }
      ],
      filter: (value, record) => record.status == value,
      multiple: true
    }
  },

  {
    title: '操作',
    width: 90,
    align: 'center',
    slotName: 'action',
    fixed: 'right'
  }
])
const EditDrawerRef = ref()
const loading = ref(false)
const tableData = ref([])
const { pagination, setTotal } = usePagination(() => getTableData(), {
  defaultPageSize: 20
})

const listParams = reactive({
  page: 1
})

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    const res = await keywordList(listParams)
    tableData.value = res.data.list
    setTotal(res?.data?.meta?.pagination?.total)
  } finally {
    loading.value = false
  }
}
getTableData()
// // 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}
// 添加/编辑
const onAddOrEdit = (item) => {
  EditDrawerRef.value?.addOrEdit(item)
}

// 改变列表中的切换按钮状态
const handleChangeStatus = async (record, str, newValue) => {
  await new Promise((resolve, reject) => {
    keywordUpdate({ ...record, [str]: newValue })
      .then(() => {
        Message.success('操作成功')
        getTableData()
        resolve(true)
      })
      .catch(() => {
        reject()
      })
  })
}
const onDelete = async (item) => {
  try {
    loading.value = true
    const res = await keywordDel({ keywordId: item.keywordId })
    Message.success(res.message)
    getTableData()
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
:deep(.arco-radio-group .arco-radio) {
  margin-right: 10px;
}
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .btn_wrap {
    dl {
      border-radius: 5px;
      color: #3e3e3e;
    }
    .dl_1 {
      background: rgba(251, 230, 239);
    }
    .dl_2 {
      background: rgba(232, 249, 240);
      dd {
        color: #0fbf60;
      }
    }
    .dl_3 {
      background: rgba(241, 241, 241);
      dd {
        color: rgba(157, 157, 157);
      }
    }
  }
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
</style>
